<template>
  <div ref="bar" style="width: 400px; height: 400px" v-if="flag"></div>
</template>

<script>
import { getRequest } from "../../util/request";
export default {
  name: "MyBarChart",
  data() {
    return {
      teaName: [],
      teaNum: [],
      userId: "",
      flag: false,
    };
  },
  props: ["bar"],
  methods: {
    initEcharts() {
      let myEcharts;
      if (myEcharts != null && myEcharts != "" && myEcharts != undefined) {
        myEcharts.dispose(); //销毁
      }
      myEcharts = this.$echarts.init(this.$refs.bar);
      let option = {
        title: {
          //   text: "茶叶种类销售量",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: this.teaName,
        },
        yAxis: {
          type: "value",
        },
        legend: {},
        series: [
          {
            name: "茶叶",
            type: "bar",
            data: this.teaNum || [23, 33, 45, 56, 78],
          },
        ],
      };
      myEcharts.setOption(option);
    },
    getSaleResult() {
      const requestResult = getRequest(
        "user/getBarSale",
        `?userId=${this.userId}`
      );
      requestResult.then(
        (response) => {
          if (response.data.length) {
            this.teaName = response.data[0];
            this.teaNum = response.data[1];
            // this.series = response.data;
            this.flag = true;
            this.$nextTick(() => {
              this.initEcharts();
            });
          }
        },
        (err) => {
          throw err;
        }
      );
    },
  },
  mounted() {
    this.userId = this.$cookie.get("userId");
    this.getSaleResult();
  },
  updated() {},
};
</script>

<style>
</style>